.text {
  border: 1px solid red;
}

/* u-input {
  autocomplete: "off";
} */

/* 基准高度 */
.hg100 {
  height: 100vh;
}
* {
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}
/* 隐藏Chrome和Safari的滚动条 */
::-webkit-scrollbar {
  display: none;
}
/* 定位 */
.pore {
  position: relative;
}

/* flex常用css */
.flex {
  display: flex;
}

.column {
  flex-direction: column;
}

.f1 {
  flex: 1;
}

.f2 {
  flex: 2;
}

.jcc {
  justify-content: center;
}

.aic {
  align-items: center;
}

.jcsb {
  justify-content: space-between;
}

.jcsa {
  justify-content: space-around;
}

.jcse {
  justify-content: space-evenly;
}

.jce {
  justify-content: flex-end;
}

.fww {
  flex-wrap: wrap;
}
.fww::after {
  content: "";
  width: 30%;
  align-items: flex-start;
  border: 1px solid transparent;
}
.shrink0 {
  flex-shrink: 0;
}

/* 颜色常用css */
.mc {
  color: #8ba3c7;
}

.wbc {
  background-color: #fff;
}

.mbc {
  background-color: #e6e6e6;
}

.gbc {
  background-color: #07c160;
}

.gc {
  color: #60cf95;
}

.cr {
  color: rgb(253, 91, 91);
}

.cf {
  color: #fff;
}
.cline {
  color: #ebedf0;
}
.ctxt {
  color: #646566;
}
.c0 {
  color: #000000;
}

.c3 {
  color: #333333;
}

.ce {
  color: #eee;
}

.c5 {
  color: #555555;
}

.c6 {
  color: #666666;
}

.c8 {
  color: #888888;
}

.c9 {
  color: #999999;
}

.c07 {
  color: #07c160;
}

.cblue {
  color: #20b6ff;
}

.cf3 {
  color: #f3c;
}

/* 间距常用CSS */
.pd0 {
  padding: 0px !important;
}

.pd8 {
  padding: 8px;
}
.pd10 {
  padding: 10px;
}
.pd20 {
  padding: 20px;
}

.pd40 {
  padding: 40px;
}

.pd60 {
  padding: 60px;
}

.pdh20 {
  padding: 0 20px;
}
.pdx10 {
  padding: 0 10px;
}
.ma {
  margin-left: auto;
  margin-right: auto;
}
.mg8 {
  margin: 8px;
}
.mg10 {
  margin: 10px;
}

.mg20 {
  margin: 20px;
}

.mg40 {
  margin: 40px;
}

.mg60 {
  margin: 60px;
}

.mg80 {
  margin: 80px;
}

.mg100 {
  margin: 100px;
}
.mgt8 {
  margin-top: 8px;
}
.mgt10 {
  margin-top: 10px;
}

.mgt20 {
  margin-top: 20px;
}

.mgt40 {
  margin-top: 40px;
}

.mgt80 {
  margin-top: 80px;
}

.mgb10 {
  margin-bottom: 10px;
}

.mgb20 {
  margin-bottom: 20px;
}

.mgb40 {
  margin-bottom: 40px;
}

.mgb80 {
  margin-bottom: 80px;
}
.mgl8 {
  margin-left: 8px;
}
.mgl10 {
  margin-left: 10px;
}

.mgl20 {
  margin-left: 20px;
}

.mgl40 {
  margin-left: 40px;
}

.mgl60 {
  margin-left: 60px;
}
.mgr8 {
  margin-right: 8px;
}
.mgr10 {
  margin-right: 10px;
}

.mgr20 {
  margin-right: 20px;
}

.mgr30 {
  margin-right: 30px;
}

.mgr40 {
  margin-right: 40px;
}
.mgr60 {
  margin-right: 60px;
}
.mgla {
  margin-left: auto;
}

/* 横纵样式 */
.mgy10 {
  margin: 10px 0;
}

.mgy40 {
  margin: 40px 0;
}

.h100 {
  height: 100px;
}

.h400 {
  height: 400px;
}

.w100 {
  width: 100%;
}

.w150 {
  width: 150px;
}

/* 字体常用CSS */
.fwb {
  font-weight: bold;
}
.fs10 {
  font-size: 10px;
}
.fs12 {
  font-size: 12px;
}
.fs14 {
  font-size: 14px;
}
.fs16 {
  font-size: 16px;
}
.fs18 {
  font-size: 18px;
}

.fs24 {
  font-size: 24px;
}

.fs28 {
  font-size: 28px;
}

.fs32 {
  font-size: 32px;
}

.fs36 {
  font-size: 36px;
}

.fs40 {
  font-size: 40px;
}

.fs44 {
  font-size: 44px;
}

.fs48 {
  font-size: 48px;
}

.fs60 {
  font-size: 60px;
}

.tac {
  text-align: center;
}

.toe {
  text-overflow: ellipsis;
}

.tar {
  text-align: right;
}

.wba {
  word-break: break-all;
}

.lh17 {
  line-height: 1.7;
}

.lh20 {
  line-height: 2;
}

.lh40 {
  line-height: 4;
}

.text-justify-none {
  text-justify: none;
}

.vab {
  vertical-align: bottom;
}

/* 组件常用css */
.br {
  border-radius: 20px;
}

.hr {
  margin: 10px 0;
  border-top: 1px solid #ccc;
}
.bdline {
  border-bottom: 1px solid #e9e0e0;
}
.card {
  margin: 10px 20px;
  background-color: #fff;
  padding: 15px 10px;
  border-radius: 12px;
  /* box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
    rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px; */
}
.navar {
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  border-radius: 50px;
  margin-right: 10px;
  background-color: #caadad;
}
.bdr {
  border-radius: 10px;
}
.tag {
  display: inline-block;
  font-weight: bold;
  padding: 8px 15px;
  font-size: 12px;
  background-color: #eeeeee65;
  border-radius: 4px;
  margin: 5px 10px;
  text-align: center;
  letter-spacing: 0;
  border: 1px solid #fff;
}
.mtag {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.65rem;
  border-radius: 20px;
  color: #fff;
  background-color: var(--primary-color);
  letter-spacing: 0;
}
.stag {
  display: inline-block;
  padding: 2px 4px;
  font-size: 0.65rem;
  border-radius: 5px;
  color: #fff;
  background-color: var(--primary-color);
  letter-spacing: 0;
}
/* 通用按钮 */
.mbtn {
  padding: 5px 15px;
  background-color: var(--primary-color);
  color: #fff;
  display: inline;
  border-radius: 5px;
}
.jbbtn {
  padding: 5px 15px;
  color: var(--primary-color);
  background-color: var(--jv-color);
  border: 1px solid var(--primary-color);
  display: inline;
  border-radius: 5px;
}
.jbbtn:hover {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: #fff;
}
.lkbtn {
  padding: 5px 15px;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  display: inline;
  border-radius: 5px;
}
.lkbtn:hover {
  background-color: var(--primary-color);
  color: #fff;
}
/* 两行显示 */
.line2 {
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 通用段落显示 */
.pah {
  line-height: 1.8;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-line;
}
/* 白色背景 */
.bgcf {
  background-color: #fff;
}
/* 主题色 */
.prColor {
  color: var(--primary-color);
}
.prBgc {
  background-color: var(--primary-color);
}
.prBoder {
  border: 1px solid var(--primary-color);
}
/* 渐变背景 */
.jbbgc {
  background-color: rgb(205, 242, 255);
  border-radius: 0 0 5px 5px;
}
/* 镂空色 */
.lkColor {
  background-color: #b1dfc7;
  color: #129250;
}
:root {
  --primary-color: #20b6ff;
  --jv-color: #b6e7ff;
}
.mainWidth {
  width: 1400px;
}
/* 底部通用样式 */
.safeFoot {
  height: 70px;
}
.footer {
  position: fixed;
  bottom: 0;
  padding: 10px 10px 20px 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.footer .btn {
  width: 85%;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 8px;
}
.dis500 {
  display: none;
}
.ndis500 {
  display: flex;
}
@media(max-width:500px){
  .bd{
    display: none;
 }
}
@media (min-width: 500px) {
  .dis500 {
    display: flex !important;
  }
  .ndis500 {
    /* background-color: #000; */
    display: none !important;
  }
  .mainCenter {
    width: 1300px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
  }
  .mainCenter .leftContent{
    width: 900px;
    border: 1px solid #999;
    border-radius: 10px;
    margin: 10px 0;
  }
  .tkcard {
    width: 713px;
    left: 25%;
    top: 30%;
  }
  .footer{
    position: absolute;
    width: 300px;
    left: 50%;
    transform: translate(-50%,0);
  }
  .jbbgc{
    border-radius: 10px 10px 5px 5px;
  }
 
}
